<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
	<style>
		body{
			margin: 0;
			padding: 0;
			background: #90009c;
		}
		ul{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			margin: 0;
			padding: 0;
			animation: donghua 4s linear infinite;
		}
		@keyframes donghua{
			0%{
				transform: rotate(0);
			}
			50%{
				transform: rotate(180deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
		ul li{
			list-style: none;
			position: absolute;
			width: 200px;
			height: 1px;
			/* background: #fff; */
			transform: translateX(-50%);
		}
		ul li:nth-child(2){
			transform: translateX(-50%) rotate(60deg);
		}
		ul li:nth-child(3){
			transform: translateX(-50%) rotate(-60deg);
		}
		ul li:before,ul li:after{
			content: '';
			position: absolute;
			top: -4px;
			left: calc(50% - 4px);
			width: 8px;
			height: 8px;
			background: #fff;
		}
		
		ul li:before{
			animation: animate 1s linear infinite;
		}
		@keyframes animate{
			0%{
				transform: translateX(0);
				opacity: 1;
				box-shadow: 0 0 0 #fff,0 0 0#fff,0 0 0#fff;
			}
			100%{
				transform: translateX(-100px);
				opacity: 0;
				box-shadow: 25px 0 0 #fff,50px 0 0#fff,75px 0 0#fff;
			}
		}
		
		ul li:after{
			animation: animate1 1s linear infinite;
		}
		@keyframes animate1{
			0%{
				transform: translateX(0);
				opacity: 1;
				box-shadow: 0 0 0 #fff,0 0 0#fff,0 0 0#fff;
			}
			100%{
				transform: translateX(100px);
				opacity: 0;
				box-shadow: -25px 0 0 #fff,-50px 0 0#fff,-75px 0 0#fff;
			}
		}
	</style>
</html>